<!DOCTYPE HTML>
<html>

<head>
   <title> 商品分类</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page span24">
         <div class="detail-page-title">
            <h4>
               商品分类
               <button type="button" id="add-new-btn" class=" pull-right jx-btn btn-default">新增分类</button>
            </h4>
         </div>
         <div class="jx-search-container">
            <form id="J_Form" class="jx-form form-horizontal jx-form-thin" method="post">
               <div class="row ">
                  <div class="control-group span7">
                     <label class="control-label">分类级别:</label>
                     <div class="controls">
                        <select id="goodsStatus" name="goodsStatus">
                                <option value="">所有级别</option>
                                <option value="1">主分类</option>
                            </select>
                     </div>
                  </div>
                  <div class="control-group span2">
                     <button type="submit" class="jx-btn btn-default">搜索</button>
                  </div>
               </div>

            </form>
         </div>
         <div class="detail-section">
            <div class="row detail-row">

               <div class="span24">
                  <!-- 表格 start-->
                  <div id="grid"></div>
                  <!-- 表格 end-->
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- 初始隐藏 dialog内容 -->
   <div id="content" class="hide">
      <form class="form-horizontal  jx-form">
         <div class="row">
            <div class="control-group span10">
               <label class="control-label">
                        <s>*</s>排序：</label>
               <div class="controls">
                  <input name="a" type="text" data-rules="{required:true,number:true}" class="input-normal control-text">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span10">
               <label class="control-label">
                        <s>*</s>分类名称：</label>
               <div class="controls">
                  <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
               </div>
            </div>
         </div>

         <div class="row">
            <div class="control-group span12">
               <label class="control-label">
                        <s>*</s>上级分类：</label>
               <div class="controls">
                  <select name="" data-rules="{required:true}">
                            <option value="顶级分类">-顶级分类-</option>
                            <option value="服饰">服饰</option>
                            <option value="配饰">配饰</option>
                            <option value="鞋子">鞋子</option>
                   </select>
                  <div> <span class="auxiliary-text">此处只显示主分类，设计的时候请按无限级分类开发</span> </div>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span10">
               <label class="control-label">
                        <s>*</s>分类编码：</label>
               <div class="controls">
                  <input name="c" type="text" data-rules="{required:true}" class="input-normal control-text">
               </div>
            </div>
         </div>

      </form>
   </div>
   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script type="text/javascript">
      BUI.use(['bui/grid', 'bui/data'], function (Grid, Data) {
         var Grid = Grid,
            Store = Data.Store,
            enumcateObj = {
               "1": "儿童鞋码",
               "2": "鞋码",
               "2": "衣码"
            },
            columns = [{
               title: '排序',
               dataIndex: 'a',
               elCls: '', //居中
               width: 100
            }, {
               title: '分类名称',
               elCls: 'center',
               dataIndex: 'b',
               width: 100
            }, {
               title: '分类编码',
               elCls: 'center',
               dataIndex: 'c',
               width: 100
            }, {

               title: '所属分类',
               elCls: 'center',
               dataIndex: 'd',
               width: 100
            }, {
               title: '商品数',
               elCls: 'center',
               dataIndex: 'e',
               width: 100
            }, {
               title: '操作',
               dataIndex: 'e',
               elCls: 'center',
               width: 200,
               renderer: function (value, obj) {
                  return '<span class="grid-command btn-edit">编辑</span>' +
                     '<a  href="#" class="grid-command btn-del"><i class="icon icon-trash"></i> 删除</a>'
               }
            }],
            data = [{
               id: '1222',
               a: '001',
               b: '鞋履',
               c: '1',
               d: '300'
            }, {
               id: '1222',
               a: '001',
               b: '鞋履',
               c: '2',
               d: '300'
            }, {
               id: '1222',
               a: '001',
               b: '鞋履',
               c: '3',
               d: '300'
            }];

         //初始化数据
         //实例化 Grid.Plugins.DialogEditing表格编辑
         var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
               contentId: 'content', //设置隐藏的Dialog内容
               triggerCls: 'btn-edit', //触发显示Dialog的样式
               editor: {
                  title: '编辑商品品牌'
               }
               /*  ,  editor: {
                       title: '自定义',
                       width: 600,
                       listeners: {
                           show: function() {
                               var form = this.get('form');
                               if (!isAddRemote) {
                                   var bField = form.getField('b');
                                   bField.set('remote', {
                                       url: '../../../form/data/remote.php',
                                       dataType: 'json', //默认为字符串
                                       callback: function(data) {
                                           if (data.success) {
                                               return '';
                                           } else {
                                               return data.msg;
                                           }
                                       }
                                   });
                                   isAddRemote = true;
                               }
                               //TO DO 
                           }
                       }
                   }*/
            }),
            store = new Store({ //初始化数据
               data: data,
               autoLoad: true, //自动加载数据
               pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               loadMask: true, //加载数据时显示屏蔽层
               forceFit: true,
               // 底部工具栏
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               plugins: [editing], //插件
               store: store
            });

         grid.render();

         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;

            if (sender.hasClass('btn-del')) { //点击删除操作
               delFunction(item, itemEl);

            } else if (sender.hasClass('btn-add')) { //点击编辑操作
               addFunction(item, itemEl);
            }

         });

         // 点击添加
         $("#add-new-btn").click(function () {
            addFunction();
         });

         //添加记录
         function addFunction() {
            var newData = {};
            editing.add(newData, 'a'); //添加记录后，直接编辑
         }
         //删除选中的记录
         function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除记录？', function () {
               var input = itemEl.find('input'),
                  name = itemEl.attr('name');
               if (name) {
                  form.getField(name).remove();
               }

               store.remove(item);
            }, 'question');
         }
      });
   </script>
   <!-- script end -->

   <body>

</html>